<template>
  <Layout>
    <section class="p-5 mb-5 bg-white">
      <!-- <el-form
        ref="queryForm"
        label-width="120px"
        class="flex flex-wrap"
        :model="query"
      >
        <el-form-item class="w-3/12" label="企业名称" prop="companyName">
          <el-input v-model.trim="query.companyName" />
        </el-form-item>
        <el-form-item class="w-3/12" label="开票抬头" prop="companyTitle">
          <el-input v-model.trim="query.companyTitle" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery({ num: 1 })">
            查询
          </el-button>
          <el-button @click="handleReset"> 重置 </el-button>
        </el-form-item>
      </el-form> -->
      <el-button
        type="primary"
        @click="handleEditTree"
      >
        {{ isEdit ? '完成' : '编辑' }}
      </el-button>
    </section>
    <section class="p-5 mb-5 bg-white">
      <el-tree
        :data="treeData"
        node-key="id"
        label="nameCn"
        :default-expand-all="true"
        :expand-on-click-node="false"
        draggable
        @node-drag-start="handleDragStart"
        @node-drag-end="handleDragEnd"
      >
        <span
          slot-scope="{ data }"
          class="custom-tree-node"
        >
          <span>{{ data.nameCn }}</span>
          <span
            v-if="isEdit"
            class="opt-col"
          >
            <el-button
              type="text"
              size="mini"
              @click="() => append(data)"
            >
              添加
            </el-button>
            <el-button
              style="color: red"
              type="text"
              size="mini"
              @click="() => remove(data)"
            >
              删除
            </el-button>
          </span>
        </span>
      </el-tree>
    </section>
    <HarborModal
      ref="HarborModal"
      @ok="handleOk"
    />
  </Layout>
</template>

<script>
import Layout from '@/layout/index.vue'
import { getTree, saveTree, delTree, switchTree } from '@/api/harbor'
import HarborModal from '@/components/HarborModal'
export default {
    name: 'Harbor',
    components: { Layout, HarborModal },
    data() {
        return {
            query: {
                companyName: '',
                companyTitle: ''
            },
            treeData: [],
            isEdit: false
        }
    },
    computed: {},
    watch: {},
    mounted() {
        this.getTree()
    },
    methods: {
        handleReset() {},
        handleQuery() {},
        handleEditTree() {
            this.isEdit = !this.isEdit
        },
        handleDragStart(node) {
            console.log('drag start', node.data)
        },
        async handleDragEnd(draggingNode, dropNode, dropType) {
            console.log('tree drag end: ', dropNode.data, dropType)
            if (dropType === 'none') return
            let param = { ...draggingNode.data, type: 2 }
            if (dropType === 'before') {
                param.orderNo = dropNode.data.index
                param.pid = dropNode.data.pid
            }
            if (dropType === 'after') {
                param.orderNo = dropNode.data.index + 1
                param.pid = dropNode.data.pid
            }
            param.childs = param.children
            await switchTree(param)
            this.getTree()
        },
        async handleOk(item, meta) {
            await saveTree({
                nameCn: item.nameCn,
                nameEnSt: item.nameEnSt,
                pid: meta.id,
                code: item.code,
                area: item.area,
                type: 2
            })
            this.getTree()
        },
        append(data) {
            this.$refs.HarborModal.showDialog(data)
        },
        async remove(data) {
            await delTree(data.id)
            this.getTree()
        },
        async getTree() {
            let res = await getTree(0)
            function eachReplaceKey(arr) {
                let item = []
                arr.map((list, index) => {
                    let newData = {}
                    newData.children = list.childs
                    newData.id = list.id
                    newData.kid = list.kid
                    newData.nameCn = list.nameCn
                    newData.nameEnSt = list.nameEnSt
                    newData.pid = list.pid
                    newData.area = list.area
                    newData.code = list.code
                    newData.orderNo = list.orderNo
                    newData.index = index
                    if (list.childs.length) {
                        newData.children = eachReplaceKey(list.childs)
                    }
                    item.push(newData)
                })
                return item
            }
            this.treeData = eachReplaceKey(res.data)
        }
    }
}
</script>
<style lang="scss" scoped>
.opt-col {
  position: relative;
  left: 20px;
  bottom: 1px;
}
</style>
